<template>
  <div class="main-container">
    <el-card class="auth-card">
      <div class="card-header">
        <img src="../assets/tea.png" class="brand-logo" alt="品牌标识">
        <h2 class="card-title">欢迎注册奶茶点餐系统</h2>
      </div>

      <el-form
          ref="ruleForm"
          :model="fromData"
          :rules="rules"
          class="auth-form"
      >
        <!-- 用户名输入 -->
        <el-form-item prop="username">
          <el-input
              v-model="fromData.username"
              placeholder="请输入账号"
              class="custom-input"
          >
            <template #prefix>
              <i class="el-icon-user input-icon"></i>
            </template>
          </el-input>
        </el-form-item>

        <!-- 密码输入 -->
        <el-form-item prop="password">
          <el-input
              v-model="fromData.password"
              type="password"
              placeholder="请输入密码"
              show-password
              class="custom-input"
          >
            <template #prefix>
              <i class="el-icon-lock input-icon"></i>
            </template>
          </el-input>
        </el-form-item>

        <el-form-item>
          <el-button
              type="primary"
              class="auth-btn"
              @click="submitForm('ruleForm')"
          >
            <i class="el-icon-edit"></i>
            立即注册
          </el-button>
        </el-form-item>

        <div class="auth-footer">
          <router-link
              :to="{ path: 'login' }"
              class="link-text"
          >
            <i class="el-icon-right"></i>
            已有账号？马上登录
          </router-link>
        </div>
      </el-form>
    </el-card>
  </div>
</template>

<script>
export default {
  data() {
    return {
      fromData: {
        username: "",
        password: ""
      },
      rules: {
        username: [
          { required: true, message: '请输入账号', trigger: 'blur' },
          { min: 4, max: 16, message: '长度在4到16个字符', trigger: 'blur' }
        ],
        password: [
          { required: true, message: '请输入密码', trigger: 'blur' },
          { pattern: /^(?=.*[A-Za-z])(?=.*\d)[A-Za-z\d]{6,}$/,
            message: '至少6位字母数字组合' }
        ]
      }
    };
  },
  methods: {
    submitForm(formName) {
      this.$refs[formName].validate((valid) => {
        if (valid) {
          this.request.post("/sysUser/register", this.fromData)
              .then(res => {
                if (res.code === 200) {
                  this.$message.success("注册成功，正在跳转");
                  setTimeout(() => {
                    this.$router.push({ path: "login" });
                  }, 1500);
                }
              })
              .catch(err => {
                this.$message.error("注册失败：" + err.message);
              });
        }
      });
    }
  }
};
</script>

<style scoped>
.main-container {
  min-height: 100vh;
  background: linear-gradient(135deg, rgba(255,228,196,0.9) 0%, rgba(255,248,220,0.9) 100%),
  url("../assets/tea.png") center/cover;
  display: flex;
  justify-content: center;
  align-items: center;
  padding: 20px;
}

.auth-card {
  width: 100%;
  max-width: 480px;
  border-radius: 16px;
  box-shadow: 0 12px 24px rgba(0,0,0,0.1);
  overflow: hidden;
  transition: transform 0.3s ease;
}

.auth-card:hover {
  transform: translateY(-5px);
}

.card-header {
  text-align: center;
  padding: 30px 0;
  background: linear-gradient(45deg, #ff9966, #ff5e62);
}

.brand-logo {
  width: 80px;
  margin-bottom: 15px;
  filter: drop-shadow(0 2px 4px rgba(0,0,0,0.1));
}

.card-title {
  color: white;
  font-size: 1.8rem;
  font-weight: 500;
  letter-spacing: 1px;
  text-shadow: 0 2px 4px rgba(0,0,0,0.1);
}

.auth-form {
  padding: 30px 40px;
  background: white;
}

/* 输入框样式优化 */
.custom-input >>> .el-input__prefix {
  left: 12px;
  display: flex;
  align-items: center;
}

.custom-input >>> .el-input__inner {
  height: 50px;
  padding-left: 40px;
  border-radius: 8px;
  border: 1px solid #eee;
  transition: all 0.3s;
}

.custom-input >>> .el-input__inner:focus {
  border-color: #ff9966;
  box-shadow: 0 0 8px rgba(255,153,102,0.2);
}

.input-icon {
  color: #ff9966 !important;
  font-size: 20px;
}

/* 按钮样式 */
.auth-btn {
  width: 100%;
  height: 50px;
  font-size: 16px;
  letter-spacing: 1px;
  background: linear-gradient(45deg, #ff9966, #ff5e62);
  border: none;
  border-radius: 8px;
  transition: all 0.3s;
}

.auth-btn:hover {
  opacity: 0.9;
  transform: scale(1.02);
  box-shadow: 0 4px 12px rgba(255,94,98,0.3);
}

.auth-btn i {
  margin-right: 8px;
}

/* 底部链接 */
.auth-footer {
  text-align: center;
  margin-top: 20px;
  padding-top: 20px;
  border-top: 1px solid #eee;
}

.link-text {
  color: #666;
  transition: color 0.3s;
}

.link-text:hover {
  color: #ff5e62;
  text-decoration: underline;
}

.link-text i {
  margin-right: 6px;
  vertical-align: middle;
}

@media (max-width: 768px) {
  .auth-card {
    width: 90%;
  }

  .card-header {
    padding: 20px 0;
  }

  .card-header .card-title {
    font-size: 1.5rem;
  }

  .auth-form {
    padding: 20px;
  }
}
</style>